<template>
    <div id="login">
        <div class="fa fa-chevron-left" id="back" @click="backClick"></div>
        <div id="login-title">添加</div>

        <input type="text" placeholder="商品分类" v-model="classifyOneName">
        <input type="text" placeholder="商品常用分类" v-model="classifyTwoName">
        <button @click="addClick">添加分类</button>
        
    </div>
</template>

<script>

export default {

    data:function(){
        return {
            classifyOneName:null,
            classifyTwoName:null,
        }

    },
    methods:{
        backClick:function(){
            history.back();
        }, 
        loginClick:function(){
            var data = {
                username:this.username,
                psw:this.psw,
            };
            this.$store.dispatch("requestLogin",data);
        },
        addClick:function(){
            var data= {
                classifyOneName:this.classifyOneName,
                classifyTwoName:this.classifyTwoName
            }
            this.$store.dispatch("requestAdd",data)
        } 
    },
}
</script>

<style scoped>
    #login{
    background-color: #cccccc;
    height: 100vh;
    text-align: center;
}
#login-title{
    text-align: center;
    font-size: 15px;
    height: 45px;
    line-height: 45px;
    background-color: skyblue;
    font-family: 宋体;
    font-weight: 700;
}
#back{
    position: absolute;
    height: 4px;
    line-height: 45px;
    left: 15px;
}
input{
height: 45px;
width: 95%;
margin-left: 8px;
margin-top: 10px;
padding: 10px;
}
button{
    height: 45px;
    width: 95%;
    margin-left: 8px;
    margin-top: 10px;
    padding: 10px;
    background-color: deepskyblue;
    border-radius: 5px;
}
.background{
    background-color: #999999;
}
</style>